<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
    这里vue dev tools有一个bug：
        如果页面没使用这个数据，但是它更改了，vue dev tools不会刷新，但vm.属性可以看到确实已经修改了
        点击手动刷新可以刷新
        vue dev tools 2.6.12 可以更新（据说）
    -->
    <div id="root">
      <h2>
        今天天气很一般（不使用数据，旧版vue dev
        tools不能实时看到数据改变，需要手动刷新）
      </h2>
      <h2>今天天气很{{info}}</h2>
      <!-- 
        模板里不能出现this
        this.isHot=!this.isHot 是不对的
        要isHot=!isHot
      -->

      <!-- @click="alert('你好！')"这样会报错：Property or method "alert" is not defined on the instance but referenced during render.
        因为这是<div id="root"></div>中，也就是模板中，是vm。而alert是window对象
        也不难window.alert()，因为vm身上也没有window

        怎么解决：要在data对象里引入window：
            data:{
            其他属性:其他属性的值,
            window:window,
            //也可以省略 :window 因为同名
            }
      -->
      <button @click="alert('你好！')">alert</button>
      <button @click="isHot=!isHot">切换天气(语句版)</button>
      <button @click="changeWeather">切换天气(函数版)</button>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false;
      const vm = new Vue({
        data: {
          isHot: true,
        },
        computed: {
          // info(){} 等于 info:function(){} 等于 info:{get(){}}
          // ！！！这是计算《属性》，使用时不能带括号
          info() {
            return this.isHot ? "炎热" : "凉爽";
          },
        },
        methods: {
          changeWeather() {
            this.isHot = !this.isHot;
          },
        },
      });
      vm.$mount("#root");
    </script>
  </body>
</html>
